    
<!DOCTYPE html>
<html>
  <head>
    <title>Cloud</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">

    <!-- date range -->
    <link rel="stylesheet" type="text/css" href="css/daterange.css">

    <!-- Main CSS -->
    <link href="css/main.css" rel="stylesheet" media="screen">

    <!-- Font Awesome CSS -->
    <link href="fonts/font-awesome.css" rel="stylesheet">
    
    <!--[if IE 7]>
      <link rel="stylesheet" href="fonts/font-awesome.css">
    <![endif]-->

      <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="container">

      <!-- Top bar start -->
      <div class="top-bar">
        
        <div class="logo">
          Trader<sup><i class="icon-glass"></i></sup>
        </div>

        <!-- Icon nav start -->
        <ul id="icon-nav">
          <li>
            <a href="#">
              <i class="icon-bell"></i>
              <span class="count-label"></span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="icon-comment-alt"></i>
              <span class="count-label count-lb-yellow"></span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="icon-envelope-alt"></i>
              <span class="count-label count-lb-green"></span>
            </a>
          </li>
        </ul>
        <!-- Icon nav end -->

        <!-- Search bar start -->
        <div class="custom-search hidden-xs">
          <input type="text" class="search-query" placeholder="搜索">
          <i class="icon-search"></i>
        </div>
        <!-- Search bar end -->

      </div>
      <!-- Top bar end -->

      <!-- Header start -->
      <header class="navbar" role="navigation">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">&nbsp;</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
          
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="index.html">设置</a>
            </li>
            <li>
              <a href="graphs.html">交易</a>
            </li>
            
            <li>
              <a href="tables.html">头寸</a>
            </li>
            <li>
              <a href="gallery.html">挂单</a>
            </li>

            <li>
              <a href="history.html">历史</a>
            </li>

            <li>
              <a href="gallery.html">历史</a>
            </li>


            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bonus Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Login</a></li>
                <li class="divider"></li>
                <li><a href="error.html">404</a></li>
                <li><a href="blankpage.html">Blank Page</a></li>
              </ul>
            </li>
          </ul>
          
          <!-- Mini navigation start -->
          <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Sandy <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">My Account</a></li>
                <li><a href="calendar.html">My Calendar</a></li>
                <li><a href="#">My Inbox</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Logout</a></li>
              </ul>
            </li>
          </ul>
          <!-- Mini navigation end -->
        </nav>
      </header>
      <!-- Header end -->

      <!-- Page title Start -->
      <div class="page-title">

        <div class="row ">
        
          <div class="col-md-6 col-sm-6 col-xs-6">
            <h2>Dashboard</h2>
            <ul class="breadcrumb">
              <li>Home</li>
              <li>Dashboard</li>
            </ul>
          </div>

          <div class="col-md-6 col-sm-6 col-xs-6">
            
            <!-- Mini Nav Right Start -->
            <ul id="page-settings">

              <li id="reportrange" >
                <i class="icon-calendar"></i>
                <span></span> <b class="caret"></b>
              </li>

              <li>
                <i class="icon-cog"></i>
              </li>
            </ul>
            <!-- Mini Nav Right End -->

            <!-- Stats Start -->
            <ul class="stats hidden-sm hidden-xs">
              <li>
                <span id="orders" class="graph"></span>
                <div class="details">
                  <span class="big">2,591</span>
                  <span class="small">Orders</span>
                </div>
              </li>
              <li>
                <span id="currentBalance" class="graph"></span>
                <div class="details">
                  <span class="big">$7,345</span>
                  <span class="small">Balance</span>
                </div>
              </li>
            </ul>
            <!-- Stats End -->

          </div>
        </div>
      </div>
      <!-- Page title end -->

      <div class="row">
        <div class="col-md-12 col-sm-12 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-bar-chart"></i>
              <h3 class="panel-title">Table</h3>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-condensed table-striped table-bordered table-hover no-margin">
                  <thead>
                    <tr>
                      <th style="width:5%">
                        <input type="checkbox" class="no-margin">
                      </th>
                      <th style="width:40%">Name</th>
                      <th style="width:20%" class="hidden-phone">Product</th>
                      <th style="width:10%" class="hidden-phone">Status</th>
                      <th style="width:15%" class="hidden-phone">Date</th>
                      <th style="width:10%" class="hidden-phone">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <input type="checkbox" class="no-margin">
                      </td>
                      <td>
                        <span class="name">Mahendra Singh Dhoni</span>
                      </td>
                      <td class="hidden-phone">Baswa #555</td>
                      <td class="hidden-phone">
                        <span class="label label label-info">New</span>
                      </td>
                      <td class="hidden-phone">15 - 10 - 2013</td>
                      <td class="hidden-phone">
                        <div class="btn-group">
                          <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
                            Action
                            <span class="caret">
                            </span>
                          </button>
                          <ul class="dropdown-menu pull-right">
                            <li>
                              <a href="#" data-original-title="">Edit</a>
                            </li>
                            <li>
                              <a href="#" data-original-title="">Delete</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="checkbox" class="no-margin">
                      </td>
                      <td>
                        <span class="name">Michel Clark</span>
                      </td>
                      <td class="hidden-phone">Baswa #343</td>
                      <td class="hidden-phone">
                        <span class="label label label-success">New</span>
                      </td>
                      <td class="hidden-phone">10 - 10 - 2013</td>
                      <td class="hidden-phone">
                        <div class="btn-group">
                          <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
                            Action
                            <span class="caret">
                            </span>
                          </button>
                          <ul class="dropdown-menu pull-right">
                            <li>
                              <a href="#" data-original-title="">Edit</a>
                            </li>
                            <li>
                              <a href="#" data-original-title="">Delete</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="checkbox" class="no-margin">
                      </td>
                      <td>
                        <span class="name">Rahul Dravid</span>
                      </td>
                      <td class="hidden-phone">Baswa #643</td>
                      <td class="hidden-phone">
                        <span class="label label label-danger">New</span>
                      </td>
                      <td class="hidden-phone">14 - 10 - 2013</td>
                      <td class="hidden-phone">
                        <div class="btn-group">
                          <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
                            Action
                            <span class="caret">
                            </span>
                          </button>
                          <ul class="dropdown-menu pull-right">
                            <li>
                              <a href="#" data-original-title="">Edit</a>
                            </li>
                            <li>
                              <a href="#" data-original-title="">Delete</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="checkbox" class="no-margin">
                      </td>
                      <td>
                        <span class="name">Anthony Michell</span>
                      </td>
                      <td class="hidden-phone">Baswa #5432</td>
                      <td class="hidden-phone">
                        <span class="label label label-info">New</span>
                      </td>
                      <td class="hidden-phone">19 - 11 - 2013</td>
                      <td class="hidden-phone">
                        <div class="btn-group">
                          <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
                            Action
                            <span class="caret">
                            </span>
                          </button>
                          <ul class="dropdown-menu pull-right">
                            <li>
                              <a href="#" data-original-title="">Edit</a>
                            </li>
                            <li>
                              <a href="#" data-original-title="">Delete</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="checkbox" class="no-margin">
                      </td>
                      <td>
                        <span class="name">Srinu Baswa</span>
                      </td>
                      <td class="hidden-phone">Baswa #999</td>
                      <td class="hidden-phone">
                        <span class="label label label-success">New</span>
                      </td>
                      <td class="hidden-phone">12 - 11 - 2013</td>
                      <td class="hidden-phone">
                        <div class="btn-group">
                          <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
                            Action
                            <span class="caret">
                            </span>
                          </button>
                          <ul class="dropdown-menu pull-right">
                            <li>
                              <a href="#" data-original-title="">Edit</a>
                            </li>
                            <li>
                              <a href="#" data-original-title="">Delete</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-6 col-sm-6 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-bar-chart"></i>
              <h3 class="panel-title">Basic Table</h3>
            </div>
            <div class="panel-body">
              <p>For basic styling-less padding and only horizontal lines add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
              <div class="table-responsive">
                <table class="table no-margin">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Baswa</td>
                      <td>Otto</td>
                      <td>@baswa</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Johnson</td>
                      <td>Harris</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Lorem</td>
                      <td>Mr. Perfect</td>
                      <td>@batman</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-bar-chart"></i>
              <h3 class="panel-title">Striped Tables</h3>
            </div>
            <div class="panel-body">
              <p>Adds striping to any table row within <code>&lt;tbody&gt;</code> by adding the <code>.table-striped</code> to the base class.</p>
              <div class="table-responsive">
                <table class="table table-striped no-margin">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Lucky</td>
                      <td>Honey</td>
                      <td>@honey</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Nani</td>
                      <td>@nani</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Harris</td>
                      <td>Handsome</td>
                      <td>@Mr.Perfect</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-12 col-sm-12 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-bar-chart"></i>
              <h3 class="panel-title">Bordered Table</h3>
            </div>
            <div class="panel-body">
              <p>Adds borders to any table row within <code>&lt;tbody&gt;</code> by adding the <code>.table-bordered</code> to the base class</p>
              <div class="table-responsive">
                <table class="table table-bordered no-margin">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>User Name</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Lucky</td>
                      <td>Honey</td>
                      <td>@honey</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Nani</td>
                      <td>@nani</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Harris</td>
                      <td>Handsome</td>
                      <td>@Mr.Perfect</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-12 col-sm-12 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-bar-chart"></i>
              <h3 class="panel-title">Hover Tables</h3>
            </div>
            <div class="panel-body">
              <p>Enables a hover state within <code>&lt;tbody&gt;</code> by adding the <code>.table-hover</code> to the base class</p>
              <div class="table-responsive">
                <table class="table table-hover no-margin">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Lucky</td>
                      <td>Honey</td>
                      <td>@honey</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Nani</td>
                      <td>@nani</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Harris</td>
                      <td>Handsome</td>
                      <td>@Mr.Perfect</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-6 col-sm-6 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-dollar"></i>
              <h3 class="panel-title">Contextual classes</h3>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-bordered table-hover no-margin">
                  <tbody>
                    <tr>
                      <td style="width:60%">
                        Daily Uinque Visitors
                      </td>
                      <td style="width:40%">
                        <span class="label label-default">
                          3575
                        </span>
                      </td>
                    </tr>
                    <tr class="active">
                      <td>
                        Daily Pageviews
                      </td>
                      <td>
                        <span class="label label-info">
                          4,776
                        </span>
                      </td>
                    </tr>
                    <tr class="warning">
                      <td>
                        Weekly Pageviews
                      </td>
                      <td>
                        <span class="label label-success">
                          33,559
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-dollar"></i>
              <h3 class="panel-title">Contextual classes</h3>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-bordered table-hover no-margin">
                  <tbody>
                    <tr class="success">
                      <td style="width:60%">
                        Income per day
                      </td>
                      <td style="width:40%">
                        <span class="label label-success">
                          $4,495.00
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Income per week
                      </td>
                      <td>
                        <span class="label label-warning">
                          $3,339.00
                        </span>
                      </td>
                    </tr>
                    <tr class="danger">
                      <td>
                        Estimated Worth
                      </td>
                      <td>
                        <span class="label label-danger">
                          $15,258.00
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      


    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Sparkline graphs -->
    <script src="js/sparkline.js"></script>

    <!-- Tyny Scrollbar -->
    <script src="js/tiny-scrollbar.js"></script>

    <!-- Date Range -->
    <script src="js/daterange/moment.js"></script>
    <script src="js/daterange/daterangepicker.js"></script>

    <!-- Custom JS -->
    <script src="js/custom.js"></script>
    <script src="js/custom-index.js"></script>

  </body>
</html>